<?php global $_; ?>
    
<div class="page-navrow">
    <div class="container ">
        <ul class="navigation">
            <li><a href="./" class="active"><?= $_->t('Top');?></a></li>
            <li><a href="#files" data-element="files"><?= $_->t('Files');?></a></li>
            <li><a href="#einbindung" data-element="einbindung"><?= $_->t('Einbindung');?></a></li>
            <li><a href="#markup" data-element="markup"><?= $_->t('Markup');?></a></li>
            <li><a href="#erste-schritte" data-element="erste-schritte"><?= $_->t('Erste Schritte');?></a></li>
            <li><a href="#function-reference" data-element="function-reference"><?= $_->t('Function Referenz');?></a></li>
            <li><a href="#options" data-element="options"><?= $_->t('Options');?></a></li>
            <li><a href="#options-reference" data-element="options-reference"><?= $_->t('Options Referenz');?></a></li>
            <li><a href="#map-data" data-element="map-data"><?= $_->t('Map Data');?></a></li>
            <li><a href="#map-data-reference" data-element="map-data-reference"><?= $_->t('Map Data Referenz');?></a></li>
            <li><a href="#css" data-element="css"><?= $_->t('CSS');?></a></li>
            <li><a href="#beispiele" data-element="beispiele"><?= $_->t('Beispiele');?></a></li>
        </ul>    
    </div>
</div>
<script>

    jQuery( document ).ready(function() {
        
        // scroll behavior, delayed
        function scrolled() {
            Page.scroll = $(this).scrollTop();
            $(this).off('scroll')[0].setTimeout(function(){
               Page.setNavRowActive();
               $(this).on('scroll',scrolled);
            }, 50);
        };
        
        //     
        jQuery(window).on('scroll',scrolled);
        
        //           
        Page.addNavRowBehavior();
        
        //
        setTimeout(function(){
            Page.scrollToRow(false);
        },500);
        
    });
    
    var Page = {
        offset_fixed : 0,
        offset_range : 100, // pixel
        scroll_offset : -10,
        scroll : 0,
        
        setNavRowActive : function() {
            var top             = 0;
            Page.offset_fixed   = $('.navigation').outerHeight(); 
            
            var rows = $('div[data-element]');
            var diff_out = '';
            
            for(var i=0; i<rows.length; i++){
                var item    = rows[i];
                var offset  = jQuery(item).offset();
                
                if (!offset)
                    return;
                
                var top     = offset['top'];
                top         = parseInt(top);                
                var diff    = parseInt(Page.scroll) - top + Page.offset_fixed;
                
                if(diff>=-Page.offset_range && diff <= Page.offset_range) {
                    jQuery(".page-navrow a").removeClass('active');

                    var element = jQuery(item).attr('data-element');
                    var target  = jQuery(".page-navrow [data-element='"+element+"']");
                    window.location.hash = element;
                    target.addClass('active');
                } else {
                    
                }
            }
        },
        
        addNavRowBehavior : function(){
            jQuery('.page-navrow ul li a').on('click',function(e){
                Page.offset_fixed = jQuery('.page-navrow').outerHeight(); 
                var element = jQuery(this).attr('data-element');
                Page.scrollToRow(element);
            });
            
        },
        
        scrollToRow : function(element){
            if(element==false)
                element = window.location.hash.replace('#','');
 
            Page.offset_fixed = $('.navigation').outerHeight();
                
            var to_row  = jQuery(".panel[data-element='"+element+"']");
            var offset  = to_row.offset();
            if(!offset)
                return;
                
            var scroll_to = offset.top - Page.offset_fixed + Page.scroll_offset;
            window.location.hash = element;
            
            jQuery('html,body').animate({ 
                                            scrollTop : scroll_to
                                                
                                        }, 1000);
        }
    }

</script>
